<template>
    <view class="container">
        <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
            activeColor="#4b7dfa"></uni-segmented-control>
        <view class="content">
            <view v-show="current === 0" :class="{ 'card-animate': showAnimation }" style="animation-delay: 0.1s;">
                <uni-card>
                    <view class="listItemTop">
                        <view>
                            <view style="display: flex; align-items: center; font-weight: bold;">
                                云海单号：C251018103620FU5OGV9C1
                                <uni-icons type="paperclip" @click="copyOrderNum" size="18" color="#4C7AF2"></uni-icons>
                            </view>
                        </view>
                    </view>
                    <view class="listItemContent">
                        <view class="itemLine">
                            <view class="contentLeft">
                                投稿单位:
                            </view>
                            <view class="contentRight">
                                校宝在线（杭州）科技股份有限公司
                            </view>
                        </view>
                        <view class="itemLine">
                            <view class="contentLeft">
                                活动名称:
                            </view>
                            <view class="contentRight" style="color: #4C7AF2;">
                                长安长安美育系列活动
                            </view>
                        </view>
                        <view class="itemLine">
                            <view class="contentLeft">
                                活动阶段:
                            </view>
                            <view class="contentRight">
                                省赛
                            </view>
                        </view>
                        <view class="itemLine">
                            <view class="contentLeft">
                                投稿人数:
                            </view>
                            <view class="contentRight">
                                99人
                            </view>
                        </view>
                        <view class="itemLine">
                            <view class="contentLeft">
                                教师人数:
                            </view>
                            <view class="contentRight">
                                10人
                            </view>
                        </view>
                        <view class="itemLine">
                            <view class="contentLeft">
                                获奖人数:
                            </view>
                            <view class="contentRight">
                                90人
                            </view>
                        </view>
                        <!-- <view class="itemLine">
                            <view class="contentLeft">
                                荣获奖项:
                            </view>
                            <view class="contentRight" style="display: flex; align-items: center; color: #4C7AF2;">
                                <uni-icons type="gift" size="24"></uni-icons>
                                查看
                            </view>
                        </view>
                        <view class="itemLine">
                            <view class="contentLeft">
                                机构荣誉:
                            </view>
                            <view class="contentRight" style="display: flex; align-items: center; color: #4C7AF2;">
                                <uni-icons type="gift" size="24"></uni-icons>
                                查看
                            </view>
                        </view> -->
                        <view class="itemLine">
                            <view class="contentLeft">
                                投稿时间:
                            </view>
                            <view class="contentRight">
                                2025-10-17 13:54:56
                            </view>
                        </view>
                        <view class="itemLine">
                            <view class="contentLeft">
                                评审时间:
                            </view>
                            <view class="contentRight">
                                2025-10-17 13:54:56
                            </view>
                        </view>
                        <view class="itemLine">
                            <view class="contentLeft">
                                收货人:
                            </view>
                            <view class="contentRight">
                                faker
                            </view>
                        </view>
                        <view class="itemLine">
                            <view class="contentLeft">
                                收货电话:
                            </view>
                            <view class="contentRight">
                                188000000000
                            </view>
                        </view>
                        <view class="itemLine">
                            <view class="contentLeft">
                                收货地址:
                            </view>
                            <view class="contentRight">
                                河北省石家庄市长安区
                            </view>
                        </view>
                        <view class="itemLine">
                            <view class="contentLeft">
                                快递单号:
                            </view>
                            <view class="contentRight">
                                SF450000000000000000000
                            </view>
                        </view>
                    </view>
                </uni-card>
            </view>
            <view v-show="current === 1" :class="{ 'card-animate': showAnimation }" style="animation-delay: 0.1s;">
                <uni-card v-for="item in teacherList">
                    <view class="listItemTop">
                        <view>
                            <view style="display: flex; align-items: center;">
                                <image class="teacherAvatar" src="/src/static/personal/default-avatar.png"></image>
                                <view class="teacherName">媛媛老师</view>
                            </view>
                        </view>
                    </view>
                    <view class="listItemContent">
                        <view class="itemLine">
                            <view class="contentLeft">
                                活动名称:
                            </view>
                            <view class="contentRight">
                                长安长安美育系列活动
                            </view>
                        </view>
                        <view class="itemLine">
                            <view class="contentLeft">
                                身份证号:
                            </view>
                            <view class="contentRight">
                                421221199504030020
                            </view>
                        </view>
                        <view class="itemLine">
                            <view class="contentLeft">
                                证书编号:
                            </view>
                            <view class="contentRight">
                                CMU0725101700909
                            </view>
                        </view>
                    </view>
                </uni-card>
            </view>
            <view v-show="current === 2">
                <!-- 搜索 -->
                <view :class="{ 'card-animate': showAnimation }" style="animation-delay: 0.1s;">
                    <uni-search-bar @confirm="search" placeholder="请输入姓名/证件编号/证书编号" v-model="searchValue"
                        @input="input">
                    </uni-search-bar>
                </view>
                <!-- 学生列表 -->
                <view :class="{ 'card-animate': showAnimation }" style="animation-delay: 0.2s;">
                    <uni-card v-for="item in teacherList">
                        <view class="listItemTop">
                            <view>
                                <view style="display: flex; align-items: center;">
                                    <image class="teacherAvatar" src="/src/static/personal/default-avatar.png"></image>
                                    <view class="teacherName">我就是超管</view>
                                </view>
                            </view>
                        </view>
                        <view class="listItemContent">
                            <view class="itemLine">
                                <view class="contentLeft">
                                    活动名称:
                                </view>
                                <view class="contentRight">
                                    长安长安美育系列活动
                                </view>
                            </view>
                            <view class="itemLine">
                                <view class="studentContentLeft">
                                    活动阶段: 省赛
                                </view>
                                <view class="studentContentRight">
                                    活动时长: 300分钟
                                </view>
                            </view>
                            <view class="itemLine">
                                <view class="studentContentLeft">
                                    组别: 高中
                                </view>
                                <view class="studentContentRight">
                                    活动类型: 诗词专项活动
                                </view>
                            </view>
                            <view class="itemLine">
                                <view class="studentContentLeft">
                                    学生年龄: 16
                                </view>
                                <view class="studentContentRight">
                                    活动地区: 吉林省
                                </view>
                            </view>
                        </view>
                    </uni-card>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onShow, onHide } from '@dcloudio/uni-app'

// 状态定义 -----------------------------------------------------------------
const loading = ref(false)
const showAnimation = ref(false) // 动画状态
const items = ['订单信息', '教师信息', '学生信息']
const current = ref(0)
const teacherList = ref([1, 2, 3]) // 教师列表


// 生命周期钩子 -----------------------------------------------------------------
onMounted(() => {
    init()
})

onShow(() => {
    // 页面载入后，延时显示动画
    setTimeout(() => {
        showAnimation.value = true;
    }, 100);
})

onHide(() => {
    // 页面隐藏时，重置动画状态
    showAnimation.value = false;
})

// 方法定义 -----------------------------------------------------------------
const init = async () => {
    try {
        loading.value = true
        // 初始化逻辑
    } catch (error) {
        console.error(error)
        uni.showToast({
            title: '操作失败',
            icon: 'none'
        })
    } finally {
        loading.value = false
    }
}

const onClickItem = (e) => {
    if (current.value != e.currentIndex) {
        current.value = e.currentIndex;
    }
}

// 复制单号
const copyOrderNum = () => {
    // 调用微信小程序的 setClipboardData API
    uni.setClipboardData({
        data: 'C251018103620FU5OGV9C1',
        success: () => {
            uni.showToast({
                title: '复制成功',
                icon: 'success'
            });
        },
        fail: () => {
            uni.showToast({
                title: '复制失败',
                icon: 'none'
            });
        }
    });
}
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    padding: 20rpx;
    background-color: #f5f5f5;

    .listItemTop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 10rpx;
        border-bottom: 1rpx solid #eee;

        .teacherAvatar {
            width: 50rpx;
            height: 50rpx;
            border-radius: 50%;
            margin-right: 10rpx;
        }

        .teacherName {
            font-size: 30rpx;
            font-weight: bold;
        }
    }

    .listItemContent {
        margin-top: 10rpx;

        .itemLine {
            display: flex;
            align-items: center;
            margin-top: 10rpx;
        }

        .contentLeft {
            width: 30%;
        }

        .contentRight {
            width: 70%;
        }

        .studentContentLeft {
            width: 50%;
        }

        .studentContentRight {
            width: 50%;
        }
    }

}


// 动画效果
.card-animate {
    opacity: 0;
    transform: translateY(20rpx);
    animation: fadeInUp 0.5s forwards;
}

.cancel-login {
    color: #2b92ff;
    text-align: center;
    letter-spacing: 5rpx;
    font-size: 32rpx;
    margin-top: 40rpx;
    width: 100%;
    border-radius: 30rpx;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30rpx);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>